<template>
    <div class="header flex-row justify-between">
        <div class="back" @click="close"><el-icon class="back_icon"><ArrowLeftBold /></el-icon></div>
        <div class="title">{{title}}</div>
        <div class="right flex-row">
            <div class="item"><el-icon size="18" class="icon"><Shop /></el-icon>售后(0)</div>
            <div class="item"><el-icon size="18" class="icon"><Setting /></el-icon>设置</div>
        </div>
    </div>
</template>
<script setup>
import { defineEmits } from "vue";

const { title,model } = defineProps(['title']);
const emit = defineEmits(['onClose'])

const close = ()=>{
    emit("onClose",{});
}
</script>
<style scoped>
@import "@/assets/css/common.css";
.header {
    width: 100%;
    height: 7%;
    line-height: 52px;
    background-color: #337ECC;
    color: #FFFFFF;
}
.title{
    width: 40%;
    font-size: 16px;
    text-align: center;
}
.back {
    text-align: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    margin-right: 90px;
}
.back .back_icon{
    transform: translate(0,3px);
}
.back:hover {
    background-color: #2068b4;
}
.content .right {
    font-size: 14px;
}
.content .right>.item{
    padding: 0 12px;
}
.content .right>.item:hover{
    background-color: #2068b4;
}
.content .right>.item>.icon{
    transform: translate(0,3px);
}
</style>